<template>
  <div class="value-and-unit">
    <span class="value text">{{ value }}</span>
    <span class="unit text">{{ unit }}</span>
  </div>
</template>
<script>
export default {
  name: '',
  props: {
    valueStyle: {
      type: Object,
      default: () => ({})
    },

    unitStyle: {
      type: Object,
      default: () => ({})
    },

    unit: {
      type: String,
      default: ''
    },

    value: {
      type: [Number, String],
      default: ''
    }
  },
  data() {
    return {

    }
  },
  computed: {

  }
}
</script>
<style lang="scss" scoped>
.value-and-unit {
  //display: flex;
  //align-items: end;

  .text {
    font-weight: 700;
    color: rgba(0, 0, 0, .9);
    line-height: 29px;
  }

  .value {
    font-size: 22px;
  }

  .unit {
    font-size: 12px;
  }
}
</style>
